<template>
  <div class="cont f-pr f-fcont f-jcfe f-aic f-bg">
    <div class="loginCont box">
      <h3 class="font1">创业手术麻醉管理系统</h3>
      <div class="f-fcont  f-fdc">
        <div class="f-f1 f-jcc f-aic f-df">
          <el-form ref="formDataRef" style="width:100%" :model="formData" status-icon label-position="right"
            label-width="auto" class=" f-p10 f-bsb">
            <el-row>

              <el-col :span="24">
                <el-form-item :rules="[{ required: true, message: '该项必填!', trigger: ['blur', 'change'], }]" label=""
                  prop="username">
                  <div class="f-fcont">
                    <div class=" f-jcc f-aic f-df f-mr10">
                      <svg t="1711529328200" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4939" width="20" height="20">
                        <path
                          d="M510.9 648c-308.3 0-389.4 176.9-389.4 311.5h778.8c0-134.6-81.1-311.5-389.4-311.5zM163 920.6C175 829 237.8 687 510.9 687c273.1 0 335.9 142 347.9 233.6H163zM510.9 570.1c118.3 0 214.2-152.3 214.2-292.1S629.2 63.8 510.9 63.8c-118.3 0-214.2 74.4-214.2 214.2 0 139.9 95.9 292.1 214.2 292.1z m0-467.3c84.7 0 175.2 46 175.2 175.2 0 127.8-86.8 253.1-175.2 253.1-88.5 0-175.2-125.4-175.2-253.1 0-129.2 90.5-175.2 175.2-175.2z"
                          fill="#060001" p-id="4940"></path>
                      </svg>
                    </div>
                    <div class="f-f1 f-jcc f-aic f-df">
                      <el-input size="large" autofocus v-model="formData.username" autocomplete="off" />
                    </div>
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item :rules="[{ required: true, message: '该项必填!', trigger: ['blur', 'change'], }]" label=""
                  prop="password">
                  <div class="f-fcont">
                    <div class=" f-jcc f-aic f-df f-mr10">
                      <svg t="1711527479296" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3651" width="20" height="20">
                        <path
                          d="M288 384v-74.666667c0-123.722667 100.266667-224 224-224s224 100.224 224 224v74.666667h10.677333C811.445333 384 864 436.597333 864 501.333333v320c0 64.821333-52.469333 117.333333-117.322667 117.333334H277.333333C212.554667 938.666667 160 886.069333 160 821.333333V501.333333c0-64.821333 52.469333-117.333333 117.322667-117.333333H288z m64 0h320v-74.666667c0-88.426667-71.605333-160-160-160-88.384 0-160 71.626667-160 160v74.666667zM224 501.333333v320c0 29.397333 23.914667 53.333333 53.322667 53.333334H746.666667A53.269333 53.269333 0 0 0 800 821.333333V501.333333c0-29.397333-23.914667-53.333333-53.322667-53.333333H277.333333A53.269333 53.269333 0 0 0 224 501.333333z"
                          fill="gray" p-id="3652"></path>
                      </svg>
                    </div>
                    <div class="f-f1 f-jcc f-aic f-df">
                      <el-input size="large" v-model="formData.password" type="password" show-password
                        autocomplete="off" />
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-col :span="24">
              <!-- <el-form-item label="角色" prop="nowPeople"
                :rules="[{ required: true, message: '该项必填!', trigger: ['blur', 'change'], }]">
                <el-select @focus="onFocus" value-key="value" :teleported="true" class="mySelect"
                  v-model="formData.nowPeople" clearable filterable :multiple="false" placeholder="请选择" collapse-tags
                  collapse-tags-tooltip :max-collapse-tags="5" style="width: 100%" :disabled="data.isDetail">
                  <el-option v-for="item in data.userList" :key="item.value" :label="item.label" :value="item" />
                </el-select>
              </el-form-item> -->
            </el-col>

            <el-form-item>
              <el-col :span="24">
                <el-button size="large" style="width:100%" type="primary" @click="submitForm(formDataRef)"
                  :loading="data.loading">登录</el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// console.log(11111,router)
import { h, ref, reactive, toRefs, watchEffect, computed, watch, onUpdated, onBeforeUpdate, onBeforeMount, onMounted } from "vue";
// 参数配置项
const options = {
  Url: "/aaaaa",
  UrlType: 'ajaxTest',
}

const formDataRef = ref()
const formData = reactive({
  username: '',
  password: "",
})



const data = reactive({ show: false, loading: false, userList: [] });

onMounted(() => {
  if (location.href.match('localhost')) {
    console.warn('我是测试点,我修改了…..用户名');
    formData.username = 'bssa';
    formData.password = '123456';

  }
})

const onFocus = function () {

  getData()
}

const getData = function () {
  data.loading = true;
  $http({
    type: "post",
    url: "/logon/myRoles",
    data: {
      "loginName": formData.username,
      "pwd": CryptoJS.MD5(formData.password).toString(),
      "tenantId": "zbsm",
      "forAccessToken": true
    },

  }).then((resp) => {
    data.loading = false;
    // data.treeData = [{ id: 1, name: '我是顶级', children: [{ id: 4, name: '2222222', children1: [{ id: 9, name: '我是子级', }] }] }];
    resp.data.body.forEach((item) => {
      item.label = item.roleName
      item.value = item.roleId
    })
    data.userList = resp.data.body
  });
}

const onLogin = function (formEl) {

  // $http({
  //   url: `/logon/login`,
  //   type: "post",
  //   data: {
  //     loginName: formData.username,
  //     pwd: CryptoJS.MD5(formData.password).toString(),
  //     // tenantId: formData.nowPeople.tenantId,
  //     forAccessToken: true,
  //   }
  // })
  //   .then(response => {
  //     // console.log("接口返回: ", response)
  //     window.nowToken = response.data.properties.accessToken
  //     localStorage.setItem("tk", response.data.properties.accessToken)
  //     response.data.code == 200 && message.success("操作成功");
  //     router.push("/home");

  //   })
  router.push("/home");
}

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('校验通过!')
      // console.log(11111, formData.nowPeople)
      // 将信息存到localStorage
      localStorage.setItem('userInfo', JSON.stringify(formData.nowPeople));
      window.userInfo = formData.nowPeople;
      onLogin()

    } else {
      console.log('校验不通过!')
      return false
    }
  })
}

</script>
<style lang="less" scoped>
.cont {
  width: 100vw;
  height: 100vh;
  background: url(/public/vite.svg);
}

.loginCont {
  // height: 400px;
  width: 300px;
  margin-right: 10%;
  margin-bottom: 10%;
}
</style>
